import React, { useState } from "react";
import {
  ResultPage,
  Tabs,
  Input,
  Button,
  CalendarPickerView,
  Popup,
} from "antd-mobile";
import { useNavigate } from "react-router-dom";
import { LoopOutline } from "antd-mobile-icons";
import { useSelector } from "react-redux";
import { useDispatch } from "react-redux";
import dayjs from "dayjs";
import { exChange } from "../../store/citys";
function Index() {
  let nav = useNavigate();
  let { start, end } = useSelector((state) => state.citys);
  let dispatch = useDispatch();
  let [date, setDate] = useState(dayjs().format("YYYY-MM-DD"));
  const [visible5, setVisible5] = useState(false);
  const huan = () => {
    dispatch(exChange());
  };
  const sou=()=>{
    nav(`/list?start=${start}&end=${end}`)
  }
  return (
    <div>
    
      <ResultPage status="" title="同程旅行">
        <ResultPage.Card style={{ height: 64, padding: 8 }}>
          <Tabs>
            <Tabs.Tab title="火车票" key="fruits">
              <div className="kk">
                <span onClick={()=>nav('/list/start')}>{start}</span>
                <span>
                  <LoopOutline onClick={() => huan()}></LoopOutline>
                </span>
                <span onClick={()=>nav('/list/end')}>{end}</span>
              </div>
              <span onClick={() => setVisible5(true)}>{date}</span>
              <Button
                block
                color="primary"
                size="large"
                style={{ background: "green", borderRadius: "20px" }}
                onClick={()=>sou()}
              >
                搜索
              </Button>
            </Tabs.Tab>
            <Tabs.Tab title="飞机票" key="vegetables">
              飞机票
            </Tabs.Tab>
            <Tabs.Tab title="酒店" key="animals">
              酒店
            </Tabs.Tab>
            <Tabs.Tab title="汽车票" key="car">
              汽车票
            </Tabs.Tab>
          </Tabs>
        </ResultPage.Card>
      </ResultPage>
      <Popup
        visible={visible5}
        onMaskClick={() => {
          setVisible5(false);
        }}
        bodyStyle={{
          borderTopLeftRadius: "8px",
          borderTopRightRadius: "8px",
          minHeight: "40vh",
        }}
      >
        <CalendarPickerView
          onChange={(val) => setDate(dayjs(val).format("YYYY-MM-DD"))}
        />
      </Popup>
    </div>
  );
}

export default Index;
